<template>
  <div>
      <div>
    <el-button @click="showMapDialog">选择店铺位置</el-button>
    <!-- 地图弹框组件 -->
    <MapDialog
      v-model="mapVisible"
      @confirm="handleAddressConfirm"
    />
  </div>

   <el-form ref="form" :model="form" :rules="rules" label-width="120px">
     <el-row>
       <el-col :span="12">
         <el-form-item label="店铺名称" prop="shopName">
           <el-input v-model="form.shopName"></el-input>
         </el-form-item>
         <el-form-item label="店铺地址" prop="shopAddress">
           <el-input v-model="form.shopAddress"></el-input>
         </el-form-item>
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model="form.phone"></el-input>
         </el-form-item>
         <el-form-item label="营业时间" prop="yingyeTime">
           <el-input v-model="form.yingyeTime"></el-input>
         </el-form-item>
         <el-form-item label="经营范围" prop="jingyingfw">
           <el-input v-model="form.jingyingfw"></el-input>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="负责人" prop="fuzer">
           <el-input v-model="form.fuzer"></el-input>
         </el-form-item>
         <el-form-item label="店铺面积" prop="dianpumj">
           <el-input-number v-model.number="form.dianpumj" :min="0"></el-input-number>
         </el-form-item>
         <el-form-item label="开店日期" prop="shopDate">
           <el-date-picker v-model="form.shopDate" type="date" placeholder="选择开店日期"></el-date-picker>
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
           <el-input v-model="form.email"></el-input>
         </el-form-item>
         <el-form-item label="所在区域" prop="region">
           <el-input v-model="form.region"></el-input>
         </el-form-item>
         <el-form-item label="是否连锁" prop="liansuo">
           <el-switch v-model="form.liansuo"></el-switch>
         </el-form-item>
       </el-col>
     </el-row>
     <el-form-item label="店铺网址" prop="wangAddress">
       <el-input v-model="form.wangAddress"></el-input>
     </el-form-item>
     <el-form-item label="客服电话" prop="kefuPhone">
       <el-input v-model="form.kefuPhone"></el-input>
     </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer" style="text-align: center">
     <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
     <el-button @click="$emit('change', false)">取 消</el-button>
   </div>
 </div>
</template>

<script>
import MapDialog from '../Address/Window.vue'
import basepath from '../../plugins/base.js'
export default {
 name: 'Edit',
  components:{MapDialog},
 data() {
   return {
      mapVisible: false,
      selectedAddress: '',
     baseimg: '',
     baseapi: '',

     types: [],
     specs: [],

     form: {
       AddressID:0,
       shopName: '',
       shopAddress: '',
       phone: '',
       yingyeTime: '',
       jingyingfw: '',
       fuzer: '',
       dianpumj: 0,
       shopDate: '',
       email:'',
       region: '',
       liansuo: false,
       wangAddress: '',
       kefuPhone: ''
     },

     // 表单验证规则
     rules: {
       shopName: [
         { required: true, message: '请输入店铺名称', trigger: 'blur' }
       ],
       shopAddress: [
         { required: true, message: '请输入店铺地址', trigger: 'blur' }
       ],
       phone: [
         { required: true, message: '请输入联系电话', trigger: 'blur' },
       ],
       dianpumj: [
         { type: 'number', message: '请输入有效的店铺面积', trigger: 'blur' }
       ],
       shopDate: [
         { required: true, message: '请选择开店日期', trigger: 'change' }
       ],
       email: [
         { required: true, message: '请输入邮箱', trigger: 'blur' },
     ]
     }
   };
 },
 model: {
   prop: "dialogFormVisible",
   event: "change",
 },
 props: {
   dialogFormVisible: Boolean,
   editData: Object,
 },
 watch: {
   editData: {
     deep: true,
     handler(newValue) {
       console.log('接收到的 editData 新值:', newValue);
       if (newValue) {
         this.form = JSON.parse(JSON.stringify(newValue));
         if (this.form.birthday) {
           this.form.birthday = new Date(this.form.birthday);
         }
       }
     }
   }
 },
 methods: {
    showMapDialog() {
      this.mapVisible = true
    },
    handleAddressConfirm(addressData) {
      this.selectedAddress = `${addressData.name} (${addressData.address})`
       this.form.shopName=addressData.name,
       this.form.addressData.name
      // 格式示例：蜜雪冰城中东门店 (北京市海淀区中关村大街1号)
    },
   // 提交按钮
   submitForm(formName) {
     // 进行表单验证
     this.$refs[formName].validate((valid) => {
       if (valid) {
         let data = JSON.parse(JSON.stringify(this.form));
         console.log('提交的数据:', data);
         let AddressID = data.AddressID;
         // 调用 Api 保存数据
         this.axios({
           method: "put",
           url: 'HJQ_store_info/up',
           data: {
           AddressID :data.AddressID,
             shopName: data.shopName,
             shopAddress: data.shopAddress,
             phone: data.phone,
             yingyeTime: data.yingyeTime,
             jingyingfw: data.jingyingfw,
             fuzer: data.fuzer,
             dianpumj: data.dianpumj,
             shopDate: data.shopDate,
             email:data.email,
             region: data.region,
             liansuo: data.liansuo,
             wangAddress: data.wangAddress,
             kefuPhone: data.kefuPhone,
           }
         })
         .then((res) => {
           console.log('响应数据:', res);
           if (res && res.code > 0) {
             // axios 完成添加
             this.$message({
               message: res.msg,
               type: "success",
               showClose: true,
               duration: 3000,
             });
             //刷新主页面数据
             this.$emit("refresh");
             //关闭弹窗
             this.$emit("change", false);
           } else {
             this.$message({
               message: res.msg,
               type: "error",
               showClose: true,
               duration: 3000,
             });
           }
         })
       } else {
         console.log("error submit!!");
         return false;
       }
     });
   },
 },
 created() {
   this.baseimg = basepath.imgUrl;
   this.baseapi = basepath.apiUrl;
   if (this.editData) {
     this.form = JSON.parse(JSON.stringify(this.editData));
     if (this.form.birthday) {
       this.form.birthday = new Date(this.form.birthday);
     }
   }
 },
}
</script>

<style scoped>
.avatar {
 max-width: 100%;
 max-height: 200px;
 /* 可根据需要调整最大高度 */
 object-fit: contain;
 /* 使图片保持比例并适应容器 */
}
</style>